<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglib.jsp"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
</head>
<body>
	<section class="ui-container">
			<section id="tab">
				<div class="demo-item">
					<div class="ui-searchbar-wrap ui-border-b">
						<div class="ui-searchbar ui-border-radius">
							<i class="ui-icon-search"></i>
							<div class="ui-searchbar-text" id="keywordshow">关键字</div>
							<div class="ui-searchbar-input"><input id="keyword" value="" type="text" placeholder="关键字" autocapitalize="off"></div>
							<i class="ui-icon-close" id="emptyKeyword"></i>
						</div>
						<button class="ui-searchbar-cancel" id="search">搜索</button>
					</div>
					<div class="demo-block">
						<div class="ui-tab">
            			    <ul class="ui-tab-nav ui-border-b">
								<li>最热问题</li>
								<li>最新问题</li>
							</ul>
							<ul class="ui-tab-content" style="width:300%">
								<li>
									<ul id="hotquestionlistframe" class="ui-list ui-list-pure ui-border-tb">
									</ul>
								</li>
								<li>
									<ul id="latestquestionlistframe" class="ui-list ui-list-pure ui-border-tb">
									</ul>
								</li>
							</ul>
							<ul id="pullMore"></ul>
						</div>
					</div>
					<script class="demo-script">
					</script>
				</div>
			</section>
		</section>
		
		<script type="text/javascript">
			// 页码和排序方式初始化
			var pageNumber = {"hot":1,"lastest":1};
			var orderFlag = 0;
			
			// 预初始化下拉加载(无关键字)
			dropJoin("");
			
			// 搜索
			$("#search").tap(function() {
				var keyword = $("#keyword").val();
				$("#keywordshow").html(keyword);
				
				// 先清空最新最热的，然后重置页数后执行搜索
				$("#hotquestionlistframe").empty();
				$("#latestquestionlistframe").empty();
				pageNumber = {"hot":1,"lastest":1};
				dropJoin(keyword);
			});
			
			// 下拉综合
			function dropJoin(keyword) {
				droploadquest("hotquestionlistframe",0,keyword,pageNumber.hot);
				droploadquest("latestquestionlistframe",1,keyword,pageNumber.lastest);
				
				//pageNumber++;
			}
			
			function droploadquest(target,orderFlag,keyword,page) {
				console.log(1)
				// 下拉加载插件
				$('.pullMore').dropload({
				    scrollArea : window,
				    loadDownFn : function(me){
				        $.ajax({
				            type: 'GET',
				            url: "${ctx}/wechat/faq/questionlist",
				            dataType: 'json',
				            data: {"pageNumber":page, "orderFlag":orderFlag, "contentLike": keyword},
				            success: function(result){
								$("loading").remove();
				            	if (result.questionList.rows.length != 0) {
				            		var html = template('questionListModel', result.questionList);
				            		$(html).appendTo("#"+target);
				            		page ++ ;
					                // 每次数据加载完，必须重置
					                me.resetload();
				            	} else {
				            		$("<li class='ui-txt-muted' style='text-align:center'>已无更多内容</li>").appendTo("#"+target);
				            	}
				            },
				            error: function(xhr, type){
				                /*alert('Ajax error!');
				                // 即使加载出错，也得重置
				                me.resetload();*/
				            }
				        });
				    }
				});
			}
			
			// 初始化滑动分类
			(function (){
			    var tab = new fz.Scroll('.ui-tab', {
			        role: 'tab',
			        autoplay: false,
			        interval: 3000,
			    });
			    /* 滑动开始前 */
			    tab.on('beforeScrollStart', function(fromIndex, toIndex) {
			        // 最新的谷歌已经支持zepto的pointup时间，会导致此处tap执行2次。但是微信浏览器不会,需要修改zepto源码，暂时先不在此先方法
			        
			        // 切换后返回顶部 
			    	scrollTo(0,0)
			    });
			})();
			
			// 顶部输入搜索框
			$('.ui-searchbar').tap(function() {
				$('.ui-searchbar-wrap').addClass('focus');
				$('.ui-searchbar-input input').focus();
			});
			$('.ui-searchbar-cancel').tap(function() {
				$('.ui-searchbar-wrap').removeClass('focus');
			});
			
			$("#emptyKeyword").tap(function() {
				$('#keyword').val('')
			})
		</script>
		<!-- 问题列表模板 -->
		<script id="questionListModel" type="text/html">
		{{each rows as item i}}
			<li class="ui-border-t">
				<h5 class="ui-flex">
					<span class="ui-avatar-tiled" style="margin-top: 8px;">
					<span style="background-image:url({{item.headUrl}})"></span>
					</span>
					<span class="ui-flex ui-flex-align-center">&nbsp; {{item.name}}:</span>
				</h5>
				<h4><a href="./detail?id={{item.id}}" class="ui-nowrap-multi">{{item.questtionContent}}</a></h4>
				<h5 class="ui-txt-muted ui-nowrap-multi" style="-webkit-line-clamp: 3">热评：{{item.hotestComment}}</h5>
				<h6 class="ui-flex ui-txt-muted" style="margin-top: 5px;">
					<div class="date">{{item.createTime}} </div>
					<div class="ui-flex ui-flex-pack-end" style="padding-right: 33%;">{{item.commentCount}}回答</font></div>
				</h6>
			</li>
		{{/each}}
		</script>
</body>
</html>
